Upgrading React to latest 19.0.0^ version by rootp1 · Pull Request #3 · GreedyBear-Project/gb-ui

rootp1 · 2026-04-21T15:27:04Z

React 19 Readiness and Tooling Modernization

Summary

This PR moves @greedybear-project/gb-ui closer to React 19 compatibility and modernizes the local development and test setup.

The main goals of this change are:

remove React patterns that are legacy or discouraged in modern React
migrate the example app and tests away from Create React App
align core dependencies with a React 19-based development flow
keep the public component API behavior as stable as possible while doing the upgrade work

This is a broad maintenance PR touching application code, the example app, test tooling, and dependency management.

What Changed

1. React 19 compatibility cleanup

replaced legacy ReactDOM.render usage with createRoot
updated ConfirmModal to use react-dom/client
removed function-component defaultProps usage and converted defaults to parameter defaults
removed function-component propTypes declarations across the component library and example app

This keeps the codebase aligned with modern React expectations and reduces noise from patterns that are no longer the preferred approach in recent React versions.

2. Example app migration from CRA to Vite

replaced the example app entrypoint with a Vite-style root index.html
renamed the example entry file from index.js to index.jsx
renamed the example smoke test from App.test.js to App.test.jsx
replaced react-scripts commands with vite and vitest
added Vite and Vitest config for the example app

This makes the example app faster to run locally and brings it in line with the new unit test setup.

3. Test tooling migration

replaced react-scripts test with vitest
added root vitest.config.mjs
added root vitest.setup.mjs
updated the example test to use @testing-library/react

This gives us a simpler and more modern test path for React 19 work.

4. Dependency updates

upgraded peer support for react and react-dom to ^19.0.0
updated several runtime and development dependencies, including:
zustand
react-select
@testing-library/react
@testing-library/jest-dom
reactstrap
react-router-dom
axios-hooks

5. Library compatibility adjustments

updated Zustand store creation to the current API
switched persisted storage setup to createJSONStorage
hardened a few components with safer defaults and defensive optional chaining
kept the bulk of component signatures and exported names unchanged

File Groups Touched

Tooling and config

package.json
package-lock.json
.eslintrc
vitest.config.mjs
vitest.setup.mjs
example/package.json
example/vite.config.mjs
example/vitest.config.mjs
example/vitest.setup.mjs
example/index.html

Example app migration

example/src/index.jsx
example/src/App.test.jsx
multiple example sections updated for JSX/test/tooling compatibility

Component library cleanup

alerts, buttons, charts, containers, form components, icons, lists, misc utilities, modals, nav, table, tabs, text, time, stores

Most of these changes are mechanical cleanup rather than intentional behavior changes.

Behavior Notes

The intent of this PR is compatibility and maintenance, not a redesign of the component library.

Expected behavior changes are limited to:

modernized mounting behavior for the example app and confirm modal
updated test runner and local example workflow
safer default handling in many components where defaults previously lived in defaultProps

Why This PR Is Large

This migration spans several concerns at once:

React 19 preparation
removal of legacy function component patterns
test runner migration
example app migration
dependency refresh

These changes are related, and splitting them too aggressively would have made review harder because the compatibility work depends on the tooling and dependency updates.

rootp1 · 2026-04-21T15:30:09Z

Hi @regulartim, could you share the preferred PR style for this issue?
For example, would you like changes split into smaller PRs or combined into a single one? I just want to align before submitting for review.

rootp1 · 2026-04-21T17:34:19Z

and also,
@regulartim since react 19 no longer applies propTypes checks for function components, I removed them across the library.

Before finalizing, I wanted to check what direction you’d prefer going forward for prop validation:

Keep the current baseline (no runtime validation for now)
Introduce a runtime validation (somethin like Zod)
Treat TypeScript as the replacement and move toward that instead!

regulartim · 2026-04-22T06:48:56Z

Hey @rootp1 ! Thanks for your work! :)

could you share the preferred PR style for this issue?

It's fine the way it is. 👍

I wanted to check what direction you’d prefer going forward for prop validation

Keep the current baseline.

Is this ready to review then?

rootp1 · 2026-04-22T07:09:45Z

Hey @rootp1 ! Thanks for your work! :)

Hi @regulartim. Thanks for the appreciation.

This PR isn’t ready for review yet.
As I predicted, the CI checks are failing due to strict peer dependency conflicts.

For example, react-json-view@1.21.3 requires React versions up to 17, which conflicts with the current setup. There are around 4–5 similar packages (react-table) causing the same issue.
I’ve identified a few possible replacements and would like to confirm them with you before proceeding.

regulartim · 2026-04-22T07:13:42Z

I’ve identified a few possible replacements and would like to confirm them with you before proceeding.

OK :)

rootp1 · 2026-04-22T07:42:58Z

OK :)

@regulartim,
I’ve been looking into the dependency conflicts and wanted to run these replacements by you before proceeding:

react-table to @tanstack/react-table
react-json-view to @microlink/react-json-view

Along with this, I'll have to adjust the related code :

by removing the old react-table hooks (useTable, useRowSelect, useExpanded, useAsyncDebounce) and migrated the logic to TanStack Table APIs
replacing debouncing with our internal useAsyncDebounce where needed

Let me know if you’re okay with these changes, and I’ll move ahead accordingly.

rootp1 · 2026-04-22T07:45:07Z

@regulartim,

Just to add a bit more context, most of the changes would actually be driven by the shift to TanStack Table. The API differences compared to react-table are quite significant

regulartim · 2026-04-22T09:16:36Z

Hey @rootp1 ! Thanks for investigating!

Let me know if you’re okay with these changes, and I’ll move ahead accordingly.

Yes, I am ok with that. 👍

rootp1 · 2026-04-22T10:21:56Z

Hey @rootp1 ! Thanks for investigating!

Let me know if you’re okay with these changes, and I’ll move ahead accordingly.

Yes, I am ok with that. 👍

Hey @regulartim, Thanks for confirmation.
I’ve started working on the new changes based on this.
I’ll keep the changes posted as I progress and open a PR once everything is ready.

rootp1 · 2026-04-22T17:17:53Z

How react-table looked like

How tanstack/react-table looks like now

(just demonstration screenshots)

rootp1 · 2026-04-22T17:20:33Z

@regulartim, the visual testing of the Tanstack/react-table passed sucessfully

rootp1 · 2026-04-23T09:32:09Z

@regulartim as far as I checked, the implementation is qualified from my side, with lint errors

regulartim · 2026-04-23T09:34:28Z

Alright, thanks! :)

rootp1 · 2026-04-23T09:38:23Z

Alright, thanks! :)

Good Morning @regulartim,
If any caveats are left, please let me know.

regulartim · 2026-04-23T11:06:47Z

Thanks again @rootp1 ! This looks like it was a lot more work than I thought.

rootp1 · 2026-04-23T11:13:34Z

Thanks again @rootp1 ! This looks like it was a lot more work than I thought.

Thanks @regulartim! It was a bit larger than expected, there might still be some edge case breakages, happy to help fix if anything shows up.

rootp1 added 10 commits April 21, 2026 20:21

react upgrade

a71f144

app.test.js upgrade

c593b3e

remove react-scripts

9d61d48

upgrading zustand, react-select

8fad5f4

fixed vitest config

8cb332e

added vite entry point

2d7db15

more config changes

d844005

renamed entry points with .jsx

7b3b259

dropping prop-types

65e11df

better error handling

70bc26f

Merge branch 'main' into fix/react-upgrade

b4a91c5

rootp1 added 2 commits April 22, 2026 15:58

json renderer + table package

1e27503

table

3149e27

rootp1 closed this Apr 22, 2026

rootp1 reopened this Apr 22, 2026

rootp1 added 4 commits April 23, 2026 00:14

Aligned Baseline

1d47d1f

Fixed Lifecycles

427e653

Hardened Effects

0397cb6

Reworked Loading

95e24d9

rootp1 added 12 commits April 23, 2026 00:23

Stabilized Targets

6b146e2

Hardened Selectors

10f58fe

Removed Hooks

47fc023

Resolved Imports

159f60a

Updated Snapshots

278615c

updated ss

c685a06

Hardened Behavior

40601ae

Aligned Testing

1fe4bd9

Rooted ESLint

5090ee5

Disabled Propchecks

e226b53

Applied Autofixes

d713daa

Removed Unused

c476d9a

regulartim added 4 commits April 23, 2026 11:53

Fix linting issues

1057b16

Bump dependencies and remove gh-pages

f6f28f3

Replace microbundle-crl with vite build

df796f7

Fix CI

e39fe9b

regulartim merged commit a059e29 into GreedyBear-Project:main Apr 23, 2026
1 check passed

Conversation

rootp1 commented Apr 21, 2026

React 19 Readiness and Tooling Modernization

Summary

What Changed

1. React 19 compatibility cleanup

2. Example app migration from CRA to Vite

3. Test tooling migration

4. Dependency updates

5. Library compatibility adjustments

File Groups Touched

Tooling and config

Example app migration

Component library cleanup

Behavior Notes

Why This PR Is Large

Uh oh!

rootp1 commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rootp1 commented Apr 21, 2026

Uh oh!

regulartim commented Apr 22, 2026

Uh oh!

rootp1 commented Apr 22, 2026

Uh oh!

regulartim commented Apr 22, 2026

Uh oh!

rootp1 commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rootp1 commented Apr 22, 2026

Uh oh!

regulartim commented Apr 22, 2026

Uh oh!

rootp1 commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rootp1 commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How react-table looked like

How tanstack/react-table looks like now

Uh oh!

rootp1 commented Apr 22, 2026

Uh oh!

rootp1 commented Apr 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

regulartim commented Apr 23, 2026

Uh oh!

rootp1 commented Apr 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

regulartim commented Apr 23, 2026

Uh oh!

Uh oh!

rootp1 commented Apr 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rootp1 commented Apr 21, 2026 •

edited

Loading

rootp1 commented Apr 22, 2026 •

edited

Loading

rootp1 commented Apr 22, 2026 •

edited

Loading

rootp1 commented Apr 22, 2026 •

edited

Loading

rootp1 commented Apr 23, 2026 •

edited

Loading

rootp1 commented Apr 23, 2026 •

edited

Loading